<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
</head>
<body>
<div class="super-theme-example">
    <div style="height: 500px;">
        <table class="easyui-datagrid" id="dg3" ></table>
    </div>
</div>
<style type="text/css">
    .form-item {
        margin-bottom: 15px;
        width: 50%;
        float: left;
    }

    .form-item label {
        min-width: 72px;
        display: inline-block;
    }

    .form-item input,
    select {
        width: 170px;
    }
</style>
<script type="text/javascript">
    var url;
    $('#dg3').datagrid({
        title:"用户信息",
        url:"userDatagridList",
        fit: true,                       //撑开
        pagination: true,               //分页
        fitColumns: true,               //自适应尺寸
        rownumbers:true,
        toolbar: '#tb3',
        height: 400,
        //hidden:'true'  隐藏
        columns: [
            [{
                field: 'cb',
                checkbox:true       //选框
            },{
                field: 'userId',
                title: '编号',
                width: 40,
                sortable: true
            }, {
                field: 'jobNo',
                title: '工号',
                width: 80,
                align: 'center'
            }, {
                field: 'name',
                title: '姓名',
                width: 100,
                align: 'center'
            }, {
                field: 'sex',
                title: '性别',
                width: 50,
                align: 'center'
            },  {
                field: 'birthday',
                title: '出生日期',
                width: 100,
                align: 'center'
            },{
                field: 'email',
                title: '邮箱',
                width: 100,
                align: 'center'
            }, {
                field: 'user2Id',
                title: '账号编号',
                width: 50,
                align: 'center',
                hidden:'true'
            }, {
                field: 'userName',
                title: '账号',
                width: 100,
                align: 'center'
            },
            //     {
            //     field: 'password',
            //     title: '密码',
            //     width: 100,
            //     align: 'center'
            // },
                {
                field: 'synopses',
                title: '个人简介',
                width: 300,
                align: 'center'
            }]
        ]
    });
    //查询功能
    function userSearch(){
            $('#dg3').datagrid('load',{
                jobNo:$('#s_jobNo').val(),
                user2Name:$('#s_userName').val(),
                sex:$('#s_sex').combobox("getValue"),
                bBirthday:$('#s_bBirthday').datebox("getValue"),
                eBirthday:$('#s_eBirthday').datebox("getValue"),
                user2Id:$('#s_user2Id').combobox("getValue")
            });
    }
    function userDelete() {
        var selectedRows=$('#dg3').datagrid('getSelections');
        if (selectedRows.length == 0) {
            $.messager.alert("系统提示", "请选择要删除的数据！");
            return;
        }
        var strIds = [];
        for (var i = 0; i < selectedRows.length; i++) {
            strIds.push(selectedRows[i].userId);
        }
        var ids = strIds.join(",");
        $.messager.confirm("系统提示", "您确定要删掉这<font color='#dc143c'>" + selectedRows.length + "</font>条数据吗？", function (r) {
            if (r) {
                $.post("userDatagridDelete",{delIds:ids},function (result) {
                    if (result.success) {
                        $.messager.alert("系统提示", "您已成功删除<font color='#dc143c'>" + result.delNums + "</font>条数据！");
                        $('#dg3').datagrid("reload");
                    }else{
                        $.messager.alert("系统提示" + result.errorMsg);
                    }
                },"json");
            }
        });
    }
    function openUserAddDialog() {
        $('#dlg3').dialog("open").dialog("setTitle","添加用户信息");
        url = "userDatagridSave";
    }
    function openUserModifyDialog() {
        var selectedRows=$("#dg3").datagrid('getSelections');
        if(selectedRows.length!=1){
            $.messager.alert("系统提示","请选择一条要编辑的数据！");
            return;
        }
        var row=selectedRows[0];
        $("#dlg3").dialog("open").dialog("setTitle","编辑用户信息");
        //自动把row中的数据load进fm（form）中
        $("#fm3").form("load",row);
        //效率高
        url="userDatagridSave?userId="+row.userId;
    }
    function saveUser() {
        $('#fm3').form("submit",{
            url:url,
            onSubmit: function () {
                //验证user2Id 必须选取
                if ($('#user2Id').combobox("getValue") == "") {
                    $.messager.alert("系统提示", "请选择用户账号");
                    return false;
                }
                //验证sex 必须选取
                if ($('#sex').combobox("getValue") == "") {
                    $.messager.alert("系统提示", "请选择用户性别");
                    return false;
                }
                return $(this).form("validate");
            },
            success: function (result) {
                if (result.errorMsg) {
                    $.messager.alert("系统提示", result.errorMsg);
                    return;
                } else {
                    $.messager.alert("系统提示", "操作成功");
                    resetValue();
                    $('#dlg3').dialog("close");
                    $('#dg3').datagrid("reload");
                }
            }
        });
    }
    function closeUserDialog() {
        $('#dlg3').dialog("close");
        resetValue();
    }
    function resetValue() {
        //input设置值
        $('#jobNo').textbox('setValue',"");
        $('#name').textbox('setValue',"");
        //combobox、datebox需要用easyui实现
        $('#sex').combobox("setValue","");
        $('#birthday').datebox("setValue","");
        $('#user2Id').combobox("setValue","");
        $('#email').textbox('setValue',"");
        $('#synopses').val("");
    }
</script>
<!--toolbar部分-->
<div id="tb3">
    <div>
        <a href="javascript:openUserAddDialog()" class="easyui-linkbutton" iconCls="fa fa-plus" plain="true">添加</a>
        <a href="javascript:openUserModifyDialog()" class="easyui-linkbutton" iconCls="fa fa-edit" plain="true">修改</a>
        <a href="javascript:userDelete()" class="easyui-linkbutton" iconCls="fa fa-remove" plain="true">删除</a>
    </div>
    <div>
        &nbsp;工号:&nbsp;
        <input type="text" name="s_jobNo" id="s_jobNo" size="12"/>
        &nbsp;姓名:&nbsp;
        <input type="text" name="s_userName" id="s_userName" size="7"/>
        &nbsp;性别:&nbsp;
        <select  name="s_sex" id="s_sex" class="easyui-combobox" data-options="editable:false,panelHeight:null" style="width: 90px" >
            <option value="" >请选择...</option>
            <option value="男" >男</option>
            <option value="女">女</option>
        </select>
        &nbsp;出生日期:&nbsp;
        <input name="s_bBirthday" id="s_bBirthday" type="text" class="easyui-datebox" required="required" editable="true" size="15"/>->
        <input name="s_eBirthday" id="s_eBirthday" type="text" class="easyui-datebox" required="required" editable="true" size="15"/>
        &nbsp;账号:&nbsp;
        <select  name="s_user2Id" id="s_user2Id" class="easyui-combobox"
                 data-options="editable:false,panelHeight:null,
                 valueField:'id',textField:'userName',url:'userCombo2List'" style="width: 90px" >
        <!--异步操作  ajax操作从后台取数据  参考官网写法-->
        <!--利用ajax添加键值对  请选择...-->
        </select>
        <a href="javascript:userSearch()" class="easyui-linkbutton" iconCls="fa fa-search" plain="true">搜索</a>
    </div>
</div>
<div id="dlg3" class="easyui-dialog" style="width:600px;height: 450px;padding:10px 20px" closed="true" buttons="#dlg3-buttons">
    <!--    搞个表单，需要提交-->
    <form id="fm3" method="post">
        <div class="form-item">
            <label for="jobNo" class="label-top">工号：</label>
            <input name="jobNo" id="jobNo" class="easyui-validatebox easyui-textbox" prompt="请输入用户工号" data-options="required:true,validType:'length[1,7]'"/>
        </div>
        <div class="form-item">
            <label for="name" class="label-top">姓名：</label>
            <input name="name" id="name" class="easyui-validatebox easyui-textbox" prompt="请输入用户姓名" required="true"/>
        </div>
        <div class="form-item">
            <label for="sex" class="label-top">性别：</label>
            <select  name="sex" id="sex" class="easyui-combobox" data-options="editable:false,panelHeight:null" style="width: 90px" >
                <option value="" >请选择...</option>
                <option value="男" >男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div class="form-item" >
            <label for="birthday" class="label-top">出生日期：</label>
            <input name="birthday" id="birthday" type="text" class="easyui-datebox" required="true" editable="false" />
        </div>
        <div class="form-item" style="padding-right: 20px">
            <label for="user2Id" class="label-top" >账号：</label>
            <select  name="user2Id" id="user2Id" class="easyui-combobox" data-options="editable:false,panelHeight:null,
            valueField:'id',textField:'userName',url:'userCombo2List'" style="width: 170px" >
            </select>
        </div>
        <div class="form-item" style="padding-right: 20px">
            <label for="email" class="label-top">邮箱：</label>
            <input name="email" id="email" class="easyui-validatebox easyui-textbox" prompt="请输入用户邮箱" validType="email"/>
        </div>
        <div class="form-item">
            <label for="synopses" class="label-top">个人简介：</label>
            <textarea rows="7" cols="50" name="synopses" id="synopses"></textarea>
        </div>
    </form>
</div>
<div id="dlg3-buttons">
    <a href="javascript:saveUser()" class="easyui-linkbutton" iconCls="fa fa-check">保存</a>
    <a href="javascript:closeUserDialog()" class="easyui-linkbutton" iconCls="fa fa-close">关闭</a>
</div>
</body>
</html>